{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<form {{action "onSubmit" "secondary-token" "primary" (hash ttl=this.ttl id=this.id) on="submit"}}>
  <div class="box is-fullwidth is-shadowless is-marginless">
    <h4 class="title is-5">
      Generate a secondary token
    </h4>
    <p>
      Generate a token to enable
      {{this.model.replicationModeForDisplay}}
      replication or change primaries on secondary cluster.
    </p>
  </div>
  <MessageError @errors={{this.errors}} />
  <div class="field">
    <label for="activation-token-id" class="is-label">
      Secondary ID
    </label>
    <div class="control">
      <Input
        class="input"
        name="activation-token-id"
        id="activation-token-id"
        @value={{this.id}}
        data-test-replication-secondary-id
      />
    </div>
    <p class="help has-text-grey">
      This will be used to identify a secondary cluster once a connection has been established with the primary.
    </p>
  </div>
  <div class="field">
    <TtlPicker
      @initialValue="30m"
      @label="Time to Live (TTL) for generated secondary token"
      @helperTextDisabled="If not set, the default value (30 minutes) will be used"
      @helperTextEnabled="After this period, the generated token will no longer be valid."
      @onChange={{action "updateTtl"}}
      @changeOnInit={{true}}
    />
  </div>
  {{#if (eq this.replicationMode "performance")}}
    <PathFilterConfigList @paths={{this.paths}} @config={{this.filterConfig}} @id={{this.id}} />
  {{/if}}
  <hr class="has-background-gray-100" />
  <Hds::ButtonSet>
    <Hds::Button @text="Generate token" type="submit" data-test-secondary-add />
    <Hds::Button @text="Cancel" @color="secondary" @route="mode.secondaries" @model={{this.model.replicationMode}} />
  </Hds::ButtonSet>
</form>

{{#if this.isModalActive}}
  <Hds::Modal
    id="replication-copy-token-modal"
    @onClose={{action "closeTokenModal"}}
    @isDismissDisabled={{not this.isTokenCopied}}
    as |M|
  >
    <M.Header>
      Copy your token
    </M.Header>
    <M.Body>
      <p>
        This token can be used to enable
        {{this.model.replicationModeForDisplay}}
        replication or change primaries on the secondary cluster.
      </p>
      <div class="box is-shadowless is-fullwidth is-sideless">
        <h2 class="title is-6">Activation token</h2>
        <div class="copy-text level">
          <div class="is-fullwidth">
            <textarea readonly value={{this.token}} id="token-textarea" class="textarea level-left"></textarea>
          </div>
        </div>
        <div class="has-top-margin-xl has-bottom-margin-s">
          <InfoTableRow @label="TTL" @value={{this.ttl}} />
          <InfoTableRow @label="Expires" @value={{date-format this.expirationDate "MMM dd, yyyy hh:mm:ss a"}} />
        </div>
      </div>
    </M.Body>
    <M.Footer>
      <Hds::ButtonSet>
        <Hds::Copy::Button
          data-test-modal-copy
          @text="Copy token"
          @textToCopy={{this.token}}
          class="primary"
          @container=".hds-modal"
          @onError={{(fn
            (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")
          )}}
          {{on "click" (action "onCopy")}}
        />
        <Hds::Button
          data-test-modal-close
          disabled={{not this.isTokenCopied}}
          @text="Close"
          @color="secondary"
          {{on "click" (action "closeTokenModal")}}
        />
        {{#unless this.isTokenCopied}}
          <AlertInline @type="warning" @message="Copy token to dismiss modal" />
        {{/unless}}
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}